import React, { useEffect, useState } from "react";
import { Popup, NavBar, Input, Card, IndexBar, List } from "antd-mobile";
import { citySet } from "../../../reducers/citySlice";
import { useDispatch } from "react-redux";
import http from "../../../utils/http";
import AMapLoader from "@amap/amap-jsapi-loader";
function CityPopup({ visible2, setVisible2, type }) {
  const dispatch = useDispatch();
  // const groups = [];

  const [groups, setGroups] = useState([]);
  const [hotCities, setHotCities] = useState([]);
  const getCity = async () => {
    const res = await http.get("/api/city");
    const { code, data } = res.data;

    if (code == 200) {
      setGroups(data.city);
      setHotCities(data.hotCities);
    }
  };
  useEffect(() => {
    getCity();
  }, []);

  const setCity = (city) => {
    dispatch(citySet({ type: type, value: city }));
    setVisible2(false);
  };
  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "d4bf50ad71781d5456564190267962ec",
    };
    AMapLoader.load({
      key: "ee115c5d34688b71341d68c7504d7a0e", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        AMap.plugin("AMap.CitySearch", function () {
          var citySearch = new AMap.CitySearch();
          citySearch.getLocalCity(function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // 查询成功，result即为当前所在城市信息
            }
          });
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);
  return (
    <Popup
      // position='right'
      // showCloseButton
      visible={visible2}
      onMaskClick={() => {
        setVisible2(false);
      }}
      onClose={() => {
        setVisible2(false);
      }}
      // 设置 flex 和 flex垂直 布局可以把城市的indexBar组件显示完整
      bodyStyle={{
        height: "100vh",
        width: "100vw",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <NavBar
        onBack={() => {
          setVisible2(false);
        }}
      >
        <Input placeholder="请输入城市" />
      </NavBar>
      <div className="city_postion">当前定位： 北京</div>
      <Card className="hot_box">
        <h3>热门</h3>
        <div className="hot_flex">
          {
            // 根据请求回来的数据渲染的
            hotCities.map((item, index) => {
              return <span key={index}>{item.name}</span>;
            })
          }
        </div>
      </Card>
      <IndexBar>
        {groups.map((group) => {
          const { initial, list } = group; // 改了数据，根据返回的内容改的
          return (
            <IndexBar.Panel
              index={initial}
              title={`标题${initial}`}
              key={`标题${initial}`}
            >
              <List>
                {list.map((item, index) => (
                  // item.name 是根据返回的数据修改的
                  <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          );
        })}
      </IndexBar>
    </Popup>
  );
}

export default CityPopup;
